<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="query.nickName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            plain
            @click="loadProduct"
          ></el-button>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="loadProduct"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialog.addShow = true"
            >新建</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="ProductList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="inspectionProductId" label="首件检记录编号">
      </el-table-column>
      <el-table-column prop="inspectionDate" label="首件检时间">
      </el-table-column>
      
      <el-table-column prop="productName" label="产品名称"> </el-table-column>
      <el-table-column prop="ticketId" label="工单ID"> </el-table-column>
      <el-table-column prop="nickName" label="负责人">
        
      </el-table-column>
      <el-table-column label="成品占比">
        <template slot-scope="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="scope.row.inspectionResult"
            :color="colors"
          >
          </el-progress>
        </template>
         </el-table-column>

      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.inspectionProductId)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.inspectionProductId)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
          <!-- <el-button
            type="info"
            icon="el-icon-edit"
            size="small"
            @click="handleLook(scope.row.operationProcedureId)"
            >查看工序</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- --------------------------添加---------------------- -->
    <el-dialog
      title="添加工序检记录"
      :visible.sync="dialog.addShow"
      width="30%"
    >
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="首件检时间" hidden>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="addForm.inspectionDate"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="成品占比">              
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="addForm.inspectionResult"
                :color="customColorMethod"
              ></el-progress>
              <div>
                <el-button-group>
                  <el-button icon="el-icon-d-arrow-left" @click="decreaseTen(addForm)"></el-button>
                  <el-button icon="el-icon-arrow-left" @click="decrease(addForm)"></el-button>
                  <el-button icon="el-icon-arrow-right" @click="increase(addForm)"></el-button>
                  <el-button icon="el-icon-d-arrow-right" @click="increaseTen(addForm)"></el-button>
                </el-button-group>
              </div>
            </el-form-item>
            <el-form-item label="产品ID">
              <el-input
                v-model="addForm.productId"
                placeholder="请输入产品ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="工单ID">
              <el-input
                v-model="addForm.ticketId"
                placeholder="请输入工单ID"
              ></el-input>
            </el-form-item>
<!-- 
            <el-form-item label="负责人">
              <el-input
                v-model="addForm.workNo"
                placeholder="请输入负责人工号"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="检查人">              
              <el-cascader
                v-model="optionList"
                :options="options"
                @change="handleOptionChange"
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------修改---------------------- -->
    <el-dialog
      title="编辑工序检记录"
      :visible.sync="dialog.updateShow"
      width="30%"
    >
      <el-form ref="updateForm" :model="updateForm" label-width="90px">
        <el-row>
          <el-col :span="24">
            
            
            <el-form-item label="产品ID">
              <el-input
                v-model="updateForm.productId"
                placeholder="请输入产品ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="工单ID">
              <el-input
                v-model="updateForm.ticketId"
                placeholder="请输入工单ID"
              ></el-input>
            </el-form-item>

            <el-form-item label="检查人">              
              <el-cascader
                v-model="optionList"
                :options="options"
                @change="handleOptionChange"
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="成品占比">              
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="updateForm.inspectionResult"
                :color="customColorMethod"
              ></el-progress>
              <div>
                <el-button-group>
                  <el-button icon="el-icon-d-arrow-left" @click="decreaseTen(updateForm)"></el-button>
                  <el-button icon="el-icon-arrow-left" @click="decrease(updateForm)"></el-button>
                  <el-button icon="el-icon-arrow-right" @click="increase(updateForm)"></el-button>
                  <el-button icon="el-icon-d-arrow-right" @click="increaseTen(updateForm)"></el-button>
                </el-button-group>
              </div>
            </el-form-item>
            <el-form-item label="编号" hidden>
              <el-input v-model="updateForm.inspectionProductId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>    
  </el-card>
</template>
  
  <script>
export default {
  data() {
    return {
      options: [],
      optionList: [],
      updateForm: {},
      addForm: {
        inspectionResult: 0,
      },
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#6f7ad3", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#5cb87a", percentage: 100 },
      ],
      dialog: {
        addShow: false,
        updateShow: false,
      },
      pageInfo: {
        pageSizes: [5, 10, 20, 30],
        total: 0,
      },
      query: {
        currentPage: 1,
        pageSize: 5,
        dateRange: [],
        nickName: "",
      },
      ProductList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    handleOptionChange() {
      this.addForm.workNo =
        this.optionList[this.optionList.length - 1];
        this.updateForm.workNo =
        this.optionList[this.optionList.length - 1];
    },
    loadOptions() {
      this.$axios
        .post("/emps/3")
        .then((res) => {
          if (res.data.code == 200) {
            this.options = res.data.data.vos;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadProduct();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadProduct();
    },
    loadProduct() {
      this.$axios.post("proinsp/queryAll", this.query)
        .then((res) => {
          this.ProductList = res.data.data.list;
          this.pageInfo.total = res.data.data.total;
          for (var i = 0; i < this.ProductList.length; i++) {
            this.ProductList[i].inspectionResult = parseInt(this.ProductList[i].inspectionResult);
          }
        });
    },
    add() {
      this.$axios.post("proinsp", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.addForm = {};
          this.$message.success(res.data.message);
          this.dialog.addShow = false;
          this.loadProduct();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },    
    handleEdit(inspectionProductId) {
      this.$axios.get("proinsp/" + inspectionProductId).then((res) => {
        this.updateForm = res.data.data.product;
        this.updateForm.inspectionResult = parseInt(this.updateForm.inspectionResult)
      });
      this.dialog.updateShow = true;
    },
    update() {
      this.$axios.put("proinsp", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false;
          this.loadProduct();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleDelete(inspectionProductId) {
      this.$axios.delete("proinsp/" + inspectionProductId).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadProduct();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    increase(form) {
      form.inspectionResult += 1;
      if (form.inspectionResult > 100) {
        form.inspectionResult = 100;
      }
    },
    decrease(form) {
      form.inspectionResult -= 1;
      if (form.inspectionResult < 0) {
        form.inspectionResult = 0;
      }
    },
    increaseTen(form) {
      form.inspectionResult += 10;
      if (form.inspectionResult > 100) {
        form.inspectionResult = 100;
      }
    },
    decreaseTen(form) {
      form.inspectionResult -= 10;
      if (form.inspectionResult < 0) {
        form.inspectionResult = 0;
      }
    },
  },
  mounted() {
    this.loadProduct();
    this.loadOptions();
  },
};
</script>